<template>

	<div class="app-container">
		<el-row>
			<el-col :span="24">
				<el-row>
					<el-input style="width: 200px;" v-model="page.mobile" class="filter-item" placeholder="手机号" @keyup.enter.native="serch">
					</el-input>
					<el-input style="width: 200px;" v-model="page.realname" class="filter-item" placeholder="姓名" @keyup.enter.native="serch">
					</el-input>
					<div class="posit-contont">
						<el-input style="width: 200px;" v-model="page.deptName" :readonly="true" placeholder="部门" @focus="isDepTreeShow = true" @keyup.enter.native="serch">
						</el-input>
						<el-tree class="posit-tree" :highlight-current="true" @node-click="serchDep" ref="tree" :data="serchDeptList" node-key="id" :props="defaultProps" v-show="isDepTreeShow">
						</el-tree>
					</div>
					
					<el-button class="filter-item" type="primary" icon="search" @click="serch">搜索</el-button>
					<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="edit" @click="addUser">添加</el-button>
					<el-button type="primary" icon ="el-icon-upload2" @click="importFile">批量上传</el-button>
				</el-row>
				<el-row>
					<el-table :data="userList" style="width: 100%">
						<el-table-column prop="id" label="ID" align="left"></el-table-column>
						<el-table-column prop="userExpand.realname" label="姓名" align="left"></el-table-column>
						<el-table-column prop="mobile" label="手机" align="center"></el-table-column>
						<el-table-column prop="userExpand.deptName" label="部门" align="left"></el-table-column>
						<el-table-column prop="userExpand.profession" label="职务" align="left"></el-table-column>
						<el-table-column prop="email" label="邮箱" align="center"></el-table-column>
						<el-table-column prop="createdate" label="注册日期" align="center"></el-table-column>
						<el-table-column label="状态" align="center" width="100px">
							<template slot-scope="scope">
								<span>{{!scope.row.isavalible?"正常":"冻结"}}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作" align="center" width="400px">
							<template slot-scope="scope">
								<el-button type="primary" icon="edit" @click="editPassword(scope.row)" size="mini">修改密码</el-button>
								<el-button type="primary" icon="edit" @click="editUser(scope.row)" size="mini">编辑</el-button>
								<el-button size="mini" type="danger" icon="delete" @click="deleteUser(scope.row)">移除</el-button>
							</template>
						</el-table-column>						
					</el-table>
				</el-row>
				<el-row>
					<el-pagination layout="total, sizes, prev, pager, next, jumper" :total="totalResultSize" :current-page="page.currentPage" :page-count="totalPageSize" :page-sizes="[10, 20, 30, 50]" :page-size="page.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
					</el-pagination>
				</el-row>
			</el-col>
		</el-row>
		<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
			<el-form :model="userForm" size="mini" :rules="rules" ref="dataForm" :label-position="labelPosition" style='width: 80%;margin-left: 30px; '>
				<el-row :gutter="20">
					<el-col :span="11">
						<el-form-item label="姓名" prop="realname">
							<el-input v-model="userForm.realname" auto-complete="off"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="手机号" prop="mobile" >
							<el-input v-model="userForm.mobile" auto-complete="off" :disabled="dialogStatus != 'create'"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row v-if="dialogStatus == 'create'" :gutter="20">
					<el-col :span="11">
						<el-form-item label="密码" prop="password">
							<el-input v-model="userForm.password" auto-complete="off"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="邮箱">
							<el-input v-model="userForm.email" auto-complete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row :gutter="20">
					<el-col :span="11">
						<el-form-item label="部门" prop="deptName">
							<el-input v-model="userForm.deptName" auto-complete="off" :readonly="true" @focus="isdiaDepTreeShow = true" placeholder="点击选择部门"></el-input>
							<el-tree ref="tree" class="dia-tree" @node-click="choseDept" :highlight-current="true" :data="deptList" node-key="id" :props="defaultProps" v-if="isdiaDepTreeShow">
							</el-tree>
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="职务" prop="positionId">
							<el-input v-model="userForm.profession" auto-complete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="createData" v-if="dialogStatus === 'create'">确 定</el-button>
				<el-button type="primary" @click="updateData" v-else>确 定</el-button>
			</div>
		</el-dialog>
		
		<el-dialog title="修改密码" :visible.sync="dialogPassword">
			<el-form :model="userForm" size="mini" :rules="passWord" ref="passWord" :label-position="labelPosition" style='width: 80%;margin-left: 30px; '>
				<el-row>
					<el-col :span="11">
						<el-form-item label="密码" prop="password">
							<el-input v-model="userForm.password" auto-complete="off" type="password"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="11">
						<el-form-item label="确认密码" prop="checkPass">
							<el-input v-model="userForm.checkPass" auto-complete="off" type="password"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogPassword = false">取 消</el-button>
				<el-button type="primary" @click="changePassword">确 定</el-button>
			</div>
		</el-dialog>
		<batch-import :importVisible="importVisible" @closeDiag="closeDiag" @uploadSuccess="uploadSuccess"></batch-import>
		
	</div>
</template>

<script>
	import {getComanyId} from '@/utils/auth'
	import { getStudentList, saveStudent, deleteStudent, getDeptList } from '@/api/student'
	import { validateMobile } from '@/utils/validate'
	import batchImport from '@/components/batchImport/batchImport'
	export default {
		 components: { batchImport},
		data() {
			var validPhone = (rule, value, callback) => {
				if(!value) {
					callback(new Error('请输入电话号码'))
				} else if(!validateMobile(value)) {
					callback(new Error('请输入正确的手机号码'))
				} else {
					callback()
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('请再次输入密码'));
				} else if(value !== this.userForm.password) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				companyId:"",
				importVisible:false,//控制批量上传弹窗
				dialogFormVisible: false,
				dialogPassword:false,
				dialogStatus: "",
				isDepTreeShow:false,
				isdiaDepTreeShow: false, //控制新建或修改员工部门tree树显示或隐藏
				isdiaPosiTreeShow: false, //控制新建或修改员工岗位tree树显示或隐藏
				serchDeptList:[],//搜索
				deptList: [], //部门
				defaultProps: {
					label: "name",
					children: "children",
				},
				textMap: {
					update: '修改员工',
					create: '添加员工'
				},
				labelPosition: 'right',
				userList: [],
				totalPageSize: 0,
				totalResultSize: 0,
				page: {
					companyId:"",
					realname: "",
					mobile: "",
					pageSize: 10,
					deptName:"",
					deptId:"",
					currentPage: 1
				},
				userForm: {
					companyId:"",
					realname: "",
					mobile: "",
					email: "",
					password: "123456",
					deptName: "",
					deptId: "",
					profession: "",
				},
				passWord:{
					password: [{
						required: true,
						message: '请输入账号密码',
						trigger: 'blur'
					}],
					checkPass: [{
						required: true,
						validator: validatePass2,
						trigger: 'blur'
					}]
					
				},
				rules: {
					realname: [{
						required: true,
						message: '请输入姓名',
						trigger: 'blur'
					}],
					account: [{
						required: true,
						message: '请输入账号',
						trigger: 'blur'
					}],
					mobile: [{
						required: true,
						validator: validPhone,
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入账号密码',
						trigger: 'blur'
					}],
					
					
				}
			}
		},
		created() {
			this.companyId = getComanyId();
			this.page.companyId = getComanyId();
			this.userForm.companyId = getComanyId();
			this.getUserList(this.page);
			this.getDeptList(this.page.companyId);
		},
		methods: {
			closeDiag(val){
				this.importVisible = val;
			},
			uploadSuccess(){//批量上传成功
				this.getUserList({
					"currentPage": 1
				});
			},
			getUserList(page) {
				let that = this;
				getStudentList(page).then((res) => {
					that.userList = res.entity.data;
					that.totalPageSize = res.entity.page.totalPageSize;
					that.totalResultSize = res.entity.page.totalResultSize;
					that.page["pageSize"] = res.entity.page.pageSize;
				});
			},
			getDeptList(id) {
				let that = this;
				getDeptList(id).then((res) => {
					that.deptList = [...res.entity];
					that.serchDeptList = [...res.entity]
					that.serchDeptList.unshift({name:"全部",id:0});
				})
			},
			resetTemp() {
				this.userForm = {
					companyId:this.companyId,
					realname: "",
					mobile: "",
					email: "",
					password: "123456",
					deptName: "",
					deptId: "",
					profession: "",
				};
				delete this.userForm["id"];
			},
			serchDep(data) { //点击部门
				this.$forceUpdate(); //强制视图更新
				this.$set(this.page, "deptId", data.id);
				this.$set(this.page, "deptName", data.name);
				this.isDepTreeShow = false;
			},
			serch() {
				this.page["currentPage"] = 1;
				this.getUserList(this.page)
			},
			addUser() { //点击添加员工
				this.dialogStatus = "create";
				this.resetTemp();
				this.dialogFormVisible = true;
				this.isdiaDepTreeShow = false;
				this.isdiaPosiTreeShow = false;
			},
			editUser(row) { //点击编辑员工
				this.dialogStatus = "update";
				let {mobile,email,companyId,password} = row;
				let {id,realname,deptId,profession} = row.userExpand;
				this.userForm = {
					id,mobile,email,companyId,password,realname,profession
				};
				if(deptId) {
					this.userForm["deptName"] = row.userExpand.deptName;
				} else {
					this.userForm["deptName"] = "";
				}
				this.userForm["id"] = row.id;
				this.dialogFormVisible = true;
				this.isdiaDepTreeShow = false;
				this.isdiaPosiTreeShow = false;
			},
			editPassword(row){
				this.userForm ={
					"id":row.id,
					"password":row.password
				};
				this.dialogPassword = true;
			},
			changePassword(){
				let that = this;
				this.$refs['passWord'].validate((valid) => {
					if(valid) {
						saveStudent(this.userForm).then((res) => {
							that.getUserList(that.page);
							that.dialogPassword = false
							that.$notify({
								title: '成功',
								message: '修改密码成功',
								type: 'success',
								duration: 2000
							});
							
						});
					}
				});
			},
			deleteUser(row) {
				let that = this;
				this.$confirm('是否确定移除员工？ 移除之后将无法恢复！', '提示', {
					confirmButtonText: '确定移除',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					deleteStudent(row.id).then((res) => {
						that.getUserList(that.page);
						that.$notify({
							title: '成功',
							message: '移除成功',
							type: 'success',
							duration: 2000
						});
					});
				}).catch(() => {
             
        		});
			},
			handleSizeChange(val) {
				this.page["pageSize"] = val;
				this.page["currentPage"] = 1;
				this.getUserList(this.page);
			},
			handleCurrentChange(val) {
				this.page["currentPage"] = val;
				this.getUserList(this.page);

			},
			addAndChange(text) {
				let that = this;
				let FormData = this.userForm;
				this.$refs['dataForm'].validate((valid) => {
					if(valid) {
						delete FormData["deptName"];
						saveStudent(FormData).then((res) => {
							that.getUserList(that.page);
							that.dialogFormVisible = false
							that.$notify({
								title: '成功',
								message: text + '成功',
								type: 'success',
								duration: 2000
							});

						});
					}

				});
			},
			updateData() {
				this.addAndChange("修改");
			},
			createData() {
				this.addAndChange("添加");
			},
			choseDept(data, node) { //选择部门
				this.$forceUpdate();
				this.$set(this.userForm, "deptName", data.name);
				this.$set(this.userForm, "deptId", data.id);
			},
			 importFile(){
				let data = {
					importUrl:'/asset/file/import_students.xls',
			    	uploadUrl:'/admin/user/importExcel',
			    	
			   };
				this.$store.dispatch('setImportData', data);
				this.importVisible = true;
				
			},
		},
	}
</script>
<style scoped>
	
	.let-col {
		border: 1px solid #dfe6ec;
		padding: 15px;
	}
	
	.title {
		font-size: 12px;
		color: #606266;
	}
	
	.el-tree {
		height: 500px;
		overflow-y: auto;
		border: none;
	}
	
	.posit-contont {
		position: relative;
		display: inline-block;
	}
	
	.posit-tree {
		position: absolute;
		right: 0;
		top: 40px;
		background: #fff;
		border: 1px solid #dfe6ec;
		z-index: 100;
		width: 200px;
		height: 350px;
		overflow-y: auto;
	}
	
	.mask {
		width: 100%;
		min-height: 100%;
		z-index: 10;
		position: fixed;
		top: 0;
	}
	
	.dia-tree {
		height: 200px;
		overflow-y: scroll;
	}
	
	.el-form .el-row {
		margin: 0;
	}
	
	.el-form-item {
		margin-bottom: 12px;
	}
	
	.el-tree {
		border: 1px solid #dfe6ec;
		border-top: none;
	}
</style>